<template>
    <div ref="renderBox" class="renderBox" :style="{ gridTemplateAreas: Areas }">
        <div v-for="(item, index) in gridLength" :key="item" :style="{ gridArea: `area-${item}` }" class="grid">
            <div class="chartBox">
                <Chart :option="getOption(item)" :key="item" v-if="map.has(`${item}`)" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
// import { useCommon } from '@/stores/common';
import { ref } from 'vue';

// const commonStore = useCommon()
const { Areas, layout, config } = defineProps<{
    Areas: string
    layout: string
    config: any
}>()
console.log(layout);

// console.log(config);

const len: number[] = JSON.parse(layout).flat()
const gridLength = new Set(len)
const obj = JSON.parse(config)
const map = new Map()
for (const key in obj) {
    map.set(key, obj[key])
}

const renderBox = ref<HTMLElement>()
const getOption = (item: number) => {

    return map.get(`${item}`)
}


defineExpose({
    renderBox
})



</script>
<style lang="scss" scoped>
.renderBox {
    display: grid;
    width: 100%;
    height: 100%;
}

.grid {
    position: relative;
    overflow: hidden;
}

.chartBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
</style>